<template>
  <div>
    <el-row :gutter="5">
      <el-col :span="3" class="ba-array-key">指标项名称</el-col>
      <el-col :span="3" class="ba-array-value">告警对象</el-col>
      <!-- <el-col :span="3" class="ba-array-value">统计粒度/分钟</el-col> -->
      <el-col :span="2" class="ba-array-value">判定符号</el-col>
      <el-col :span="2" class="ba-array-value">黄色告警值</el-col>
      <el-col :span="2" class="ba-array-value">橙色告警值</el-col>
      <el-col :span="2" class="ba-array-value">红色告警值</el-col>
      <el-col :span="2" class="ba-array-value">持续数量</el-col>
      <el-col :span="3" class="ba-array-value">告警间隔(小时)</el-col>
    </el-row>
    <el-row
      class="ba-array-item"
      v-for="(item, idx) in state.value"
      :gutter="5"
      :key="idx"
    >
      <el-col :span="3">
        <el-input
          v-model="item.itemName"
          size="small"
          placeholder="指标项名称"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-select
          v-model="item.objectName"
          placeholder="告警对象"
          @click.native="selectItemObjectIdx(idx)"
          @change="selectItemObject"
          size="small"
        >
          <el-option
            v-for="i in state.objectOptions"
            :key="i.objectId"
            :label="i.objectName"
            :value="i"
          ></el-option>
        </el-select>
      </el-col>
      <!-- <el-col :span="3">
        <el-input
          v-model="item.grainSize"
          size="small"
          type="number"
          placeholder="统计粒度"
        ></el-input>
      </el-col> -->
      <el-col :span="2">
        <el-select v-model="item.symbol" placeholder="判定符号" size="small">
          <el-option
            v-for="i in warnItem.typeSymbol"
            :key="i.dictCode"
            :label="i.dictLabel"
            :value="i.dictLabel"
          ></el-option>
        </el-select>
      </el-col>
      <el-col :span="2">
        <el-input
          v-model="item.value"
          size="small"
          placeholder="黄色告警值"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-input
          v-model="item.value2"
          size="small"
          placeholder="橙色告警值"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-input
          v-model="item.value3"
          size="small"
          placeholder="红色告警值"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-input
          v-model="item.containNum"
          size="small"
          type="number"
          placeholder="持续数量"
        ></el-input>
      </el-col>
      <el-col :span="3">
        <el-input
          v-model="item.frequency"
          size="small"
          type="number"
        ></el-input>
      </el-col>
      <el-col :span="2">
        <el-button
          @click="onDelArrayItem(idx)"
          size="small"
          icon="el-icon-Delete"
          circle
        />
      </el-col>
    </el-row>
    <el-row :gutter="10">
      <el-col :span="10" :offset="10">
        <el-button
          v-blur
          class="ba-add-array-item"
          @click="onAddArrayItem"
          icon="el-icon-Plus"
          >添加</el-button
        >
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
import { reactive, watch, onMounted } from "vue";
import { useWarningItemObject } from "@/store/backend/Warning/itemObject";
import { useWarningItem } from "@/store/backend/Warning/item";

const itemObject = useWarningItemObject();
const warnItem = useWarningItem();

type baInputArray = { key: string; value: string };
interface Props {
  modelValue: any[];
}

const props = withDefaults(defineProps<Props>(), {
  modelValue: () => [],
});

const state: {
  value: any[];
  objectOptions: anyObj[];
  ItemObjectIdx: number | null;
  ItemSymbolIdx: number | null;
} = reactive({
  value: props.modelValue,
  objectOptions: [], //告警对象列表
  ItemObjectIdx: null,
  ItemSymbolIdx: null,
});

/* const emits = defineEmits<{
    (e: 'update:modelValue', value: baInputArray[]): void
}>()
const onInput = () => {
    emits('update:modelValue', state.value)
} */

const onAddArrayItem = () => {
  state.value.push({
    itemName: "",
    ruleId: warnItem.ruleId,
    ruleName: warnItem.ruleName,
    objectId: null,
    objectName: "",
    mqttFiled: "",
    // grainSize: null,
    symbol: "",
    value: "",
    value2: "",
    value3: "",
    containNum: null,
    frequency: null,
  });
  // emits('update:modelValue', state.value)
};

const onDelArrayItem = (idx: number) => {
  state.value.splice(idx, 1);
};

//获取告警对象所属索引
const selectItemObjectIdx = (idx: any) => {
  console.log("selectItemObjectIdx", idx);
  state.ItemObjectIdx = idx;
};
//选择告警对象
const selectItemObject = (val: any) => {
  state.value[state.ItemObjectIdx as number].objectId = val.objectId; //告警对象id
  state.value[state.ItemObjectIdx as number].objectName = val.objectName; //告警对象名称
  state.value[state.ItemObjectIdx as number].mqttFiled = val.mqttFiled; //MQTT字段名
  console.log("选择告警对象", state.value);
};
//获取告警对象列表
const getobjectList = () => {
  itemObject
    .getWarningItemObjectList({ pageSize: 10000 })
    .then((res: any) => {
      state.objectOptions = res;
    })
    .catch((err: any) => {});
};

//选择判定符号
const selectSymbol = (val: any) => {};

onMounted(() => {
  getobjectList(); //获取告警对象列表
  console.log("warnItem.ruleId", state.value);
});

watch(
  () => props.modelValue,
  (newVal) => {
    state.value = newVal;
  }
);
</script>

<style scoped lang="scss">
.ba-array-key,
.ba-array-value {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5px 0;
  color: var(--el-text-color-secondary);
}
.ba-array-item {
  margin-bottom: 6px;
}
.ba-add-array-item {
  float: right;
}
</style>
